import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import { Route, Switch, Redirect } from 'react-router-dom'

import './styletab.css'
import { TabWrap, TabbarStyled }  from './StyledTabbar'


import UIButton from 'components/UIButton/UIButton'

// import home from 'images/tabbar/sy_tab@3x.png'
// import homeSel from 'images/tabbar/sy_tab_s@3x.png'
// import find from 'images/tabbar/fx_tab@3x.png'
// import findSel from 'images/tabbar/fx_tab_s@3x.png'
// import hall from 'images/tabbar/dt_tab@3x.png'
// import hallSel from 'images/tabbar/dt_tab_s@3x.png'
// import my from 'images/tabbar/wd_tab@3x.png'
// import mySel from 'images/tabbar/wd_tab_s@3x.png'

// import Home from 'pages/home/Home'
// import Find from 'pages/find/Find'
// import My from 'pages/my/My'
// import Hall from 'pages/hall/Hall'
import Page404 from 'pages/page404/page404'

class Tabbar extends Component {
  // state = {
  //   selected :this.props.selectedIndex,
  // }
  render() {
    console.log(this.props)
    
    return (
      <TabWrap className="tabbarWrap">
      <Switch>
        {
        this.props.tabArr.map((value,index)=>(
          <Route key={index} path={value.routePath} component={value.component}></Route>
        ))
        }
          <Redirect from="/index" to={this.props.tabArr[this.props.selectedIndex?this.props.selectedIndex:0].routePath} exact></Redirect>
          <Route component={Page404}></Route>
        </Switch>

      <TabbarStyled {...this.props}>
        {
          this.props.tabArr.map((value,index)=>(
            <UIButton key={index}
            clickButton={()=>this.onClickButtons(value)}
            selected = {value.tag === this.props.selectedIndex}
            imgPosition = 'top'
            width = {(1/this.props.tabArr.length*100)+'%'}
            // height = "1.05rem"
            tag ={value.tag}
            titleTextAlign = "center"
          
            titleHeigh = ".18rem"
            // titleWidth = '50%'
            title={value.title}
            titleColor = {this.props.color}
            selectedTitleColor = {this.props.selectedColor}
            
            titleSize = "10px"
            imgWidth = '.2rem'
            imgHeight = '.2rem'
            imgMargin = '0.02rem 0 .01rem 0'
            img ={value.normalImg}
            selectedImg = {value.selectedImg }
            ></UIButton>
          ))
        }
        
      </TabbarStyled>
      </TabWrap>
    );
  }
  onClickButtons(value){
    
    if(value.tag === this.props.selectedIndex){
      console.log('点击选中')

    }else{
      // this.setState({
      //   selected : value.tag
      // })
      this.props.history.push(value.routePath)
      // console.log(this.props)
      // console.log(value.tag,value.routePath)

    }
    
  }
}

export default withRouter(Tabbar);